<template>
	<div class="add-factory">
		<el-card>
			<!-- 添加工厂 -->
			<el-form :model="infoForm" :rules="infoFormRules" ref="infoForm" label-width="120px">
				<div class="content-info">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="品牌名称:" prop="factory_name">
								<el-input v-model="infoForm.factory_name" placeholder="请输入品牌名称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="企业名称:" prop="name">
								<el-input v-model="infoForm.name" placeholder="请输入企业名称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="工厂编号:" prop="factory_sn">
								<el-input v-model="infoForm.factory_sn" placeholder="请输入工厂编号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="风格编号:" prop="factory_style_sn">
								<el-input v-model="infoForm.factory_style_sn" placeholder="请输入风格" clearable></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="风格名称:" prop="style">
								<el-input v-model="infoForm.style" placeholder="请输入风格" clearable></el-input>
							</el-form-item>
						</el-col> -->

						<el-col :span="12">
							<el-form-item label="联系人:" prop="contacts_name">
								<el-input v-model="infoForm.contacts_name" placeholder="请输入联系人" clearable></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="客服电话:" prop="service_phone">
								<el-input v-model="infoForm.service_phone" placeholder="请输入客服电话" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="联系电话:" prop="phone">
								<el-input v-model="infoForm.phone" placeholder="请输入联系电话" clearable></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="预付款:" prop="advance_charge">
								<el-input v-model.number="infoForm.advance_charge" placeholder="请输入预付款" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="银行账号:">
								<el-input v-model="infoForm.bank_account" placeholder="请输入银行账号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="收款方账户名:">
								<el-input v-model="infoForm.bank_account_name" placeholder="请输入收款方账户名" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开户行:">
								<el-input v-model="infoForm.bank_deposit" placeholder="请输入开户行" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开户行地址:">
								<el-input v-model="infoForm.bank_address" placeholder="请输入开户行地址" clearable></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="开户行类型:" prop="">
								<el-select v-model="infoForm.bank_type" style="width:100%">
									<el-option v-for="item in bankTypeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<!-- <el-col :span="12">
							<el-form-item label="结算类型:" prop="pay_type">
								<el-select v-model="infoForm.pay_type" style="width:100%">
									<el-option v-for="item in payTypeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<!-- <el-col :span="12">
							<el-form-item label="工厂城市:" prop="factory_city">
								<el-input v-model="infoForm.factory_city" placeholder="请输入工厂城市" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<!-- <el-col :span="12" v-if="!is_subsidiary_corporation">
							<el-form-item label="子公司列表" prop="">
								<el-select v-model="infoForm.filiale_id" style="width:100%">
									<el-option v-for="item in filialeList" :key="item.filiale_id" :label="item.name" :value="item.filiale_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<!-- <el-col :span="12">
							<el-form-item label="自营价系数:" prop="self_coefficient">
								<el-input v-model="infoForm.self_coefficient" placeholder="请输入自营价系数" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<!-- <el-col :span="12">
							<el-form-item label="零售价系数:" prop="retail_coefficient">
								<el-input v-model="infoForm.retail_coefficient" placeholder="请输入零售价系数" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="出厂价系数:" prop="factory_coefficient">
								<el-input v-model="infoForm.factory_coefficient" placeholder="请输入出厂价系数" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="佣金系数:" prop="commission_coefficient">
								<el-input v-model="infoForm.commission_coefficient" placeholder="请输入佣金系数" clearable><template slot="append">%</template></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="保证金:" prop="bond_price">
								<el-input v-model="infoForm.bond_price" placeholder="请输入保证金" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="已收保证金:" prop="bond_money">
								<el-input v-model="infoForm.bond_money" placeholder="请输入已收保证金" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="接单权重:">
								<el-input v-model="infoForm.distribution_weight" placeholder="请输入接单权重" clearable></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="24">
							<el-form-item label="详细地址:" prop="address">
								<el-input v-model="infoForm.address" placeholder="请输入详细地址" clearable></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
					<!-- <el-form-item label="关联工厂:" prop="" v-if="!is_subsidiary_corporation">
						<el-input v-model="infoForm.factory_id" placeholder="请输入工厂编号,以英文逗号隔开" clearable></el-input>
						<span style="cursor: pointer;color: #34a1e0;" @click="openView">点这里快速选择工厂</span>
					</el-form-item> -->
					<!-- <el-form-item label="类型:" prop="type" v-if="!is_subsidiary_corporation">
						<el-select v-model="infoForm.type" placeholder="请选择">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="上下架:" prop="is_online">
						<el-switch v-model="infoForm.is_online" :active-value="1" :inactive-value="2"></el-switch>
					</el-form-item>

					<!-- <el-form-item label="排序:" prop="">
						<el-input v-model="infoForm.sort" placeholder="请输入排序" clearable></el-input>
					</el-form-item>

					<el-form-item label="公司介绍:" prop="brief">
						<el-input v-model="infoForm.brief" placeholder="请输入公司介绍" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
					</el-form-item>

					<el-col :span="12">
						<el-form-item label="材质:" prop="texture">
							<el-input v-model="infoForm.texture" placeholder="请输入材质" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="定制:" prop="size">
							<el-input v-model="infoForm.size" placeholder="请输入定制" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="货期:" prop="delivery">
							<el-input v-model="infoForm.delivery" placeholder="请输入货期" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="星级:" prop="">
							<el-input v-model="infoForm.star" placeholder="请输入星级" clearable></el-input>
						</el-form-item>
					</el-col> -->

					<!-- <el-col :span="24">
						<el-form-item label="推荐理由:" prop="reason">
							<el-input v-model="infoForm.reason" placeholder="请输入推荐理由" type="textarea" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="企业logo:" class="upload-box" prop="logo">
							<div class="factory-img-upload">
								<div class="factory-img-upload-btns">
									<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } ">
										<el-button type="primary" size="small">企业logo</el-button>
									</el-upload>
									<div class="el-upload__tip">小于500KB</div>
								</div>
								<div class="factory-img-upload-imgs">
									<el-image :src="infoForm.logo">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="背景图片:" class="upload-box" prop="backgroud_img">
							<div class="factory-img-upload">
								<div class="factory-img-upload-btns">
									<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 2); } ">
										<el-button type="primary" size="small">背景图片</el-button>
									</el-upload>
									<div class="el-upload__tip">小于500KB</div>
								</div>
								<div class="factory-img-upload-imgs">
									<el-image :src="infoForm.backgroud_img">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="分类图片:" class="upload-box" prop="category_img">
							<div class="factory-img-upload">
								<div class="factory-img-upload-btns">
									<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 3); } ">
										<el-button type="primary" size="small">分类图片</el-button>
									</el-upload>
									<div class="el-upload__tip">小于500KB</div>
								</div>
								<div class="factory-img-upload-imgs">
									<el-image :src="infoForm.category_img">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>


					<el-col :span="24">
						<el-form-item label="企业图片:" class="upload-box" prop="factory_img">
							<div class="factory-img-upload">
								<div class="factory-img-upload-btns">
									<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 4); } ">
										<el-button type="primary" size="small">企业图片</el-button>
									</el-upload>
									<div class="el-upload__tip">小于500KB</div>
								</div>
								<div class="factory-img-upload-imgs">
									<el-image :src="infoForm.factory_img">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col> -->


					<el-button type="primary" style="margin-left: 38px;" @click="submitForm('infoForm')">保存</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import affiliatedFactory from '@/components/layer-dialog/affiliated-factory.vue';
	import sonMixin from '@/utils/sonMixin';
	export default {
		components: {
			affiliatedFactory
		},
		mixins:[sonMixin],
		props: {
			layerid: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				options: [{
						id: 1,
						name: '内部工厂'
					},
					{
						id: 2,
						name: '外部工厂'
					}
				],
				infoForm: {
					factory_id: '',
					filiale_id:'',
					name: '',
					factory_name: '',
					contacts_name: '',
					phone: '',
					address: '',
					brief: '',
					sort: 0,
					logo: '',
					backgroud_img: '',
					factory_img: '',
					factory_style_sn: '',
					style: '',
					category_img: '',
					factory_sn: '',
					is_online: 1,
					type: 1,
					service_phone: '',
					factory_city: '',
					style: '',
					reason: '',
					texture: '',
					delivery: '',
					size: '',
					star: 0,
					self_coefficient:'',
					retail_coefficient:'',
					bank_account:'',
					bank_account_name:'',
					bank_deposit:'',
					bank_address:'',
					bank_type:0,
					advance_charge:'',
					pay_type:'',
					factory_coefficient:1,
					commission_coefficient: '',
					bond_price: '',
					bond_money: '',
					distribution_weight: ''
				},
				// 校对规则
				infoFormRules: {
					name: [{
						required: true,
						message: '请输入企业名称'
					}],
					factory_name: [{
						required: true,
						message: '请输入品牌名称'
					}],
					factory_style_sn: [{
						required: true,
						message: '请输入风格编号'
					}],
					factory_sn: [{
						required: true,
						message: '请输入工厂编号'
					}],
					phone: [{
						required: true,
						message: '请输入联系方式'
					}],
					type: [{
						required: true,
						message: '请选择类型'
					}],
					contacts_name: [{
						required: true,
						message: '请输入联系人'
					}],
					self_coefficient:[{
						required:this.is_subsidiary_corporation?true:false,
						message:'请输入自营价系数'
					}],
					retail_coefficient:[{
						required:this.is_subsidiary_corporation?true:false,
						message:'请输入零售价系数'
					}],
					pay_type:[{
						required:true,
						message:'请选择结算类型'
					}],
					factory_coefficient:[{
						required:true,
						message:'请输入出厂价系数'
					}],
					commission_coefficient:[{
						required:true,
						message:'请输入佣金系数'
					}]
				},
				filialeList:[],//子公司
				bankTypeList:[
					{
						id:0,
						label:'非招行'
					},
					{
						id:1,
						label:"招行"
					}
				],
				payTypeList:[
					{
						id:1,
						label:'预付款'
					},
					{
						id:2,
						label:'全款'
					},
					{
						id:3,
						label:'月结'
					}
				]
			};
		},
		methods: {
			// 图片上传
			upload(params, type) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 500;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt500KB) {
					this.$message.error('图片不能大于500K!');
					return;
				}
				const form = new FormData();
				form.append('file[]', file);

				switch (Number(type)) {
					case 1:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.logo = res.datas[0];
						});
						break;
					case 2:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.backgroud_img = res.datas[0];
						});
						break;
					case 3:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.category_img = res.datas[0];
						});
						break;
					case 4:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.factory_img = res.datas[0];
						});
						break;
				}
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.AddFactory, this.infoForm).then(res => {
							this.$message.success(res.datas)
							this.$layer.close(this.layerid);
							this.$parent.init();							
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			openView() {
				this.$layer.iframe({
					title: '关联工厂',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: affiliatedFactory, //传递的组件对象
						parent: this, //当前的vue对象
						data: {} //props
					}
				});

			},
			unique(arr) {
				return Array.from(new Set(arr))
			},
			setRelationSn(factory_id) {
				if (this.infoForm.factory_id == '') {
					this.infoForm.factory_id = factory_id
				} else {
					this.infoForm.factory_id = this.infoForm.factory_id + ',' + factory_id
					let arr = this.infoForm.factory_id.split(',');
					let newArr = this.unique(arr)
					this.infoForm.factory_id = newArr.join(',')
				}
			},
			init(){
				this.$http(this.$ApiList.FilialeItems,{order_by:'filiale_id',asc:1}).then(res=>{
					this.filialeList = res.datas;
					this.infoForm.filiale_id = res.datas[0].filiale_id;
				})
			}
		},
		created() {
			this.init();
		}
	};
</script>

<style lang="scss">
	.add-factory {
		padding: 20px 20px;
		width: 100%;

		.add-factory .content-info {
			width: 700px;
		}

		.add-factory .factory-info .upload-box .factory-img-upload {
			display: flex;
		}

		.add-factory .factory-info .upload-box .factory-img-upload .factory-img-upload-imgs .el-image {
			width: 140px;
			height: 140px;
			border: solid 1px #e5e5e5;
			margin-left: 25px;
			vertical-align: top;
		}

		.star-form-view .el-form-item__content {
			display: flex;
			height: 40px;
			align-items: center;
		}
	}
</style>
